<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1">
			<!-- <image :src="uimg+bg_img" style="height: 100vh;width: 100%;position:fixed"></image> -->
			<!-- 主体区域 -->
			<view 
						class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top gui-flex gui-align-items-center">
						<gui-search 
										@inputting="inputting" 
										@confirm="confirm"></gui-search>
										<text style="margin: 0 20rpx;">搜索</text>
						</view>
						
			<view class="gui-flex gui-rows gui-space-between">
				<!-- 左侧分类列表 -->
				<scroll-view :scroll-y="true" :show-scrollbar="false" 
				:scroll-with-animation="true" :scroll-into-view="leftTo" 
				class="gui-cate-left" :style="{height:mainHeight+'px'}">
					<view class="gui-cate-left-item gui-border-box" 
					v-for="(item, index) in cateList" :key="index" 
					:class="[currentCateIndex == index ? 'gui-cate-left-current' : '']">
						<text class="gui-border-l" 
						:class="['gui-cate-left-item-title','gui-block-text', currentCateIndex == index ? 'gui-cate-left-current' : '']" 
						:data-cateid="index" 
						@tap="changCate">{{item.name}}</text>
					</view>
				</scroll-view>
				<!-- 右侧列表 -->
				<scroll-view 
				:scroll-into-view="productListTo" :show-scrollbar="false" 
				:scroll-with-animation="true" :scroll-y="true" 
				class="gui-cate-right  " 
				:style="{height:mainHeight+'px'}" >
					<view class="gui-margin-top">
						<!-- 后面菜单是动态的 -->
						<!-- <view @click="menu_click(item)" v-for="(item,index) in menuList" :key="item.Id" class="" >
							<image  :src="item.pictureId"  class="tb_icon" borderRadius="0"></image>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.activityName}}</view>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.startTime}}至{{item.endTime}}</view>
						</view> -->
						<view v-for="(item,index) in menuList" :key="item.id" class="pan gui-flex gui-column  gui-border-radius gui-bg-white">
							<view class=" gui-flex gui-row ">
								<image :src="$uimg+ item.pictureId" mode="aspectFill" class=""></image>
								<view class="info">
									<view class="title">
										{{item.activityName}}
									</view>
									<view class="sj">
										{{$comm.toDate(item.startTime)}}至{{$comm.toDate(item.endTime)}}
									</view>
								</view>
							</view>
							<view class="pan_down">
								<text>
								{{get_status( item.isStart)}}
								</text>
								<text>
									{{item.views}}人浏览
								</text>
							</view>
						</view>
					</view>
					
					 
				</scroll-view>				
			</view>	 
			 
		</view>
	</gui-page>
</template>

<script>
import graceJS from '@/Grace6/js/grace.js';
import cateChangeData from '@/Grace6/demoData/cateChange.js';
	export default {
		data() {
			return {
				// uimg:'https://app.lgwisdomunion/API-RESOURCE/webView?fid=',
				// bg_img:uni.getAccountInfoSync("bgimg"),
				// 全屏加载，当数据请求完毕时关闭
				pageLoading : true,
				// 核心区域高度
				mainHeight  : 590,
				// 左侧分类定位
				leftTo      : 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap   : false,
				// 左侧分类数据
				

				// 延迟执行防止卡顿
				scrollTimer : null,
				// 产品列表滚动定位
				productListTo: '',
				currentCateIndex:0,
				//menuList:[],  // 协同办公动态菜单
				cateList:[],
				menuList:[],
				statuslist:[{id:-1,name:'全部'},{id:1,name:'未开始'},{id:0,name:'进行中'},{id:2,name:'结束'}],
				status:-1
				}
		},
		created() {
			 console.log(this.mainCate);
		},
		onLoad:function(){
			// 获取页面主体高度从而得出主体高度
			
			graceJS.getRefs('guiPage', this, 0, (ref)=>{
						ref.getDomSize('guiPageBody', (e)=>{
							// 02. 导航的高度
							// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
							console.log(e);
							let info=uni.getSystemInfoSync();
							this.mainHeight  = info.windowHeight - info.statusBarHeight;
							setTimeout(()=>{
								this.pageLoading = false;
							},1000)
						});
					});
					this.getList();
		},
		onShow() {
		
			
			
		},
		methods: {
			navchange(d)
			{
				
				this.status=this.statuslist[d].id;
				this.get_activity();
			},
			menu_click(item){
				this.$common.menu_nav(item);
			},
			get_status(d)
			{
				switch(d){
					case 1:
						return "未开始";
					case 0:
						return "进行中";
					case 2:
						return "结束";
				}
			},
			changCate : function (e) {
				
				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;
				// this.mainCate=this.menuList[cateid].menuList;
				// setTimeout(()=>{this.isLeftTap = false;},3000)
				this.get_activity()
				
			},
			rscroll : function(e){
				if(this.isLeftTap){return ;}
				if(this.scrollTimer != null){
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(()=>{this.getIndex();}, 100);
			},
			// 获取动态菜单
			getList(){
				let self=this;
				this.$lg.Get("API-BACKEND/online/activity/queryType",{},function(res){
					// console.log(res.data);
					self.cateList=res.data;
					self.get_activity();
				})
			},
			get_activity(){
				let data={
					page:1,
					pageSize:10,
					actType:this.cateList[this.currentCateIndex].id,
					isStart:this.status
				}
				let self=this;
				this.$lg.Get("APP/front/activity/queryList",data,function(res){
					// console.log(res.data);
					self.menuList=res.data;
				})
			}
			
		}
	}
</script>

<style>
.header-search{padding:20rpx 80rpx; width:750rpx;}
.gui-cate-left{width:200rpx; background-color:#F6F7F8;}
.gui-cate-right{width:520rpx; overflow:hidden;}
.gui-cate-left-item{height:100rpx; padding:35rpx 0; font-size:26rpx;}
.gui-cate-left-item-title{line-height:32rpx; font-size:28rpx; border-color:#F6F7F8; border-left-width:8rpx; text-align:center;}
.gui-cate-left-current{border-color:#FF0066 !important; background-color:#FFFFFF; color:#FF0066; font-weight:bold;}
.gui-cate-right-title{line-height:80rpx;}
.gui-cate-product-list{margin-bottom:30rpx; margin-right:25rpx;}
.gui-cate-pimg{width:150rpx;}
.gui-cate-pbody{margin-left:30rpx; width:100rpx; flex:1; padding-top:-20rpx;}
.gui-cate-price{font-size:32rpx; line-height:60rpx;}
.pan{
	display: flex;
	margin: 20rpx 20rpx 20rpx 0rpx;
	box-shadow: 5rpx 5rpx 5rpx #ccc;
	border: solid 2rpx rgba(48,99,228,.2);
}
.pan image{
	width: 30%;
	height: 150rpx;
	padding: 20rpx;
	border-radius: 30rpx;
	border: solid 1rpx #FFFFFF;
}
.pan_down{
	height: 50rpx;
	padding: 10rpx 20rpx;
	background-color: rgba(48,99,228,.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #999;
}
.info{
	width: 70%;
	padding-top: 20rpx;
	padding-right: 10rpx;
}
.title{
	text-overflow: ellipsis;
	;
	word-break: break-all;
	height: 80rpx;
	font-weight: bold;
	text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
		line-clamp: 2;
}
.sj{
	color: #999;
	font-size: 24rpx;
	margin-top: 20rpx;
}

</style>
